<template>
  <div>
    <div class="top">
    </div>
    <el-table class="table_content" :data="state.collectionList" :border="true" v-loading="state.loading">
      <el-table-column prop="order_id" :label="t('productId')" width="60"></el-table-column>
      <el-table-column prop="name" :label="t('name')" width="60"></el-table-column>
      <el-table-column prop="mobile" :label="t('phone')" width="60"></el-table-column>
      <el-table-column prop="mission_id" :label="t('missionId')" width="60"></el-table-column>
      <el-table-column prop="loan_term" :label="t('deadline')" width="60"></el-table-column>
      <el-table-column prop="period_no" :label="t('periodCount')" width="60"></el-table-column>
      <el-table-column prop="overdue_day" :label="t('overdueDay')" width="60"></el-table-column>
      <el-table-column prop="recover_status" :label="t('recoverStatus')">
        <template v-slot="{ row }">
          <el-tag type="primary" v-if="row.recover_status === 1">{{ t('inRecover') }}</el-tag>
          <el-tag type="success" v-else>{{ t('outRecover') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="last_follow_result" :label="t('lastFollowResult')">
        <template v-slot="{ row }">
          <el-tag type="success" v-if="row.last_follow_result === 1">{{ t('followResult1') }}</el-tag>
          <el-tag type="danger" v-else-if="row.last_follow_result === 2">{{ t('followResult2') }}</el-tag>
          <el-tag type="warning" v-else-if="row.last_follow_result === 3">{{ t('followResult3') }}</el-tag>
          <el-tag type="warning" v-else-if="row.last_follow_result === 4">{{ t('followResult4') }}</el-tag>
          <el-tag type="warning" v-else-if="row.last_follow_result === 5">{{ t('followResult5') }}</el-tag>
          <el-tag type="warning" v-else-if="row.last_follow_result === 6">{{ t('followResult6') }}</el-tag>
          <el-tag type="warning" v-else-if="row.last_follow_result === 7">{{ t('followResult7') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="last_repay_will" :label="t('repayWill')">
        <template v-slot="{ row }">
          <el-tag type="success" v-if="row.last_repay_will === 1">{{ t('repayWill1') }}</el-tag>
          <el-tag type="warning" v-else-if="row.last_repay_will === 2">{{ t('repayWill2') }}</el-tag>
          <el-tag type="danger" v-else-if="row.last_repay_will === 3">{{ t('repayWill3') }}</el-tag>
          <el-tag type="info" v-else-if="row.last_repay_will === 4">{{ t('repayWill4') }}</el-tag>
          <el-tag type="warning" v-else-if="row.last_repay_will === 5">{{ t('repayWill5') }}</el-tag>
          <el-tag type="danger" v-else-if="row.last_repay_will === 6">{{ t('repayWill6') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="repay_status" :label="t('repayStatus')">
        <template v-slot="{ row }">
          <el-tag type="success" v-if="row.repay_status === 1">{{ t('hasRepay') }}</el-tag>
          <el-tag type="warning" v-else-if="row.repay_status === 2">{{ t('hasRollover') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="follow_status" :label="t('followStatus')">
        <template v-slot="{ row }">
          <el-tag type="primary" v-if="row.follow_status === 1">待跟进</el-tag>
          <el-tag type="success" v-else-if="row.follow_status === 2">已跟进</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="follow_name"
        :label="t('followName')"
      />
      <el-table-column
        prop="follow_time"
        :label="t('followTime')"
      />
      <el-table-column
        prop="last_op_time"
        :label="t('lastOpTime')"
      />
      <!--      <el-table-column
              prop="create_time"
              :label="t('createTime')"
            />
            <el-table-column
              prop="update_time"
              :label="t('updateTime')"
            />-->
      <el-table-column fixed="right" :label="t('op')">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="showFollowDialog(row)">{{ t('follow') }}</el-button>
          <el-button type="success" size="small" @click="updateOrder(row)">{{ t('update') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="state.collectionList.length"
    >
    </el-pagination>
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="500"
      v-loading="updateLoading"
    >
      <span>确定要跟进此订单吗</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="folllowOrder">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, toRefs, onMounted, watch } from 'vue'
import {
  ElTable,
  ElTableColumn,
  ElPagination,
  ElTag,
  ElButton, ElMessage
} from 'element-plus'
import { useRouter } from 'vue-router'
import { doGetCollectionList, doFollowRecover } from '@/api/collect'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const router = useRouter()

const dialogVisible = ref(false)
const updateLoading = ref(false)
const rowId = ref('')

const state = reactive({
  loading: false,
  collectionList: [],
  currentPage: 1,
  pageSize: 10
})

onMounted(() => {
  loadData()
})

function loadData() {
  state.loading = true
  doGetCollectionList(state.pageSize, state.currentPage)
    .then((res) => {
      if (res && res.recover_list) {
        state.collectionList = res.recover_list
      }
    })
    .catch((err) => {
      console.log('err:', err)
    }).finally(() => {
    state.loading = false
  })
}

const showFollowDialog = (row: any) => {
  dialogVisible.value = true
  rowId.value = row.id
}

const folllowOrder = () => {
  updateLoading.value = true
  doFollowRecover(rowId.value, 1)
    .then((res) => {
      ElMessage.success(t('followSuccess'))
      dialogVisible.value = false
      loadData()
    })
    .catch((err) => {
      updateLoading.value = false
      console.log('err:', err)
    }).finally(() => {
    updateLoading.value = false
  })
}

const updateOrder = (row: any) => {
  router.push({
    name: 'collectDetail',
    query: {
      id: row.id
    }
  })
}

const handleSizeChange = (newSize: any) => {
  state.pageSize = newSize
}

const handleCurrentChange = (newPage: any) => {
  state.currentPage = newPage
  loadData()
}

// 导出响应式状态的引用
const { currentPage, pageSize } = toRefs(state)
</script>

<style scoped lang="scss">
.top {
  width: 98%;
  margin-top: 28px;
  margin-bottom: 10px;

  .add {
    float: right;
  }

  .status {
    width: 180px;
  }
}

.table_content {
  width: 98%;
  margin-top: 20px;
}
</style>
